<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <title>Hello, world!</title>
    <style>
        .op{
            display: flex;
            justify-content: flex-end;
        }

        .op a{
            padding:0 5px;
        }
    </style>
    <!-- <link rel="stylesheet" href="css/element.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>

    <div class="container" id="app" style="padding-bottom: 50px;">
        <h1>修改信息!</h1>
        <p class="op">
            <a href="#" @click.prevent="showAll">显示所有</a>
            <a href="list.html">返回</a>
        </p>

        <!-- <div class="text-center"> <img src="imgs/test01.png"></div> -->
        <div class="row">
            <div class="col-md-5">
                <img src="imgs/test01.png" class="img-fluid img-thumbnail">
            </div>

            <div class="col-md-7">
                <form>
                    <div class="form-group">
                        <label for="exampleInputPassword1">班级</label>
                        <select class="form-control" id="exampleFormControlSelect1" v-model="class_name">
                          <option value="1">移动应用2001</option>
                          <option value="2">移动应用2002</option>
                        </select>
                    </div>

                    <div class="form-group">
                      <label for="exampleInputEmail1">姓名</label>
                      <input type="text" v-model="uname" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required> 
                    </div>
        
                    <div class="form-group form-check" v-show="show_more">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="fresh">
                        <label class="form-check-label" for="exampleCheck1">是否应届</label>
                    </div>
        
                    <div class="form-group" v-show="show_more">
                      <label for="exampleInputPassword1">最高学历</label>
                      <select class="form-control" id="exampleFormControlSelect1" v-model="collage">
                        <option value="1">专科</option>
                        <option value="2">本科</option>
                        <option value="3">研究生</option>
                      </select>
                    </div>
        
                    <div class="form-group form-check" v-show="show_more">
                        <input type="checkbox" required class="form-check-input" id="exampleCheck2" v-model="improve">
                        <label class="form-check-label" for="exampleCheck2">是否考虑提升学历</label>
                    </div>
        
                    <div class="form-group" v-show="show_more">
                        <label for="exampleInputEmail1">联系方式</label>
                        <input type="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="tel">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 联系方式 with anyone else.</small>
                    </div>
        
                    <div class="form-group" v-show="show_more">
                        <label for="exampleInputEmail1">微信号</label>
                        <input type="email" required v-model="wechat" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 微信号 with anyone else.</small>
                    </div>
        
                    <div class="form-group" v-show="show_more">
                        <label for="exampleInputEmail1">期望工作城市</label>
                        <input type="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="work_city">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 城市 with anyone else.</small>
                    </div>
        
                    <div class="form-group">
                        <label>意向工作方向是？为什么？</label>
                        <textarea class="form-control" required v-model="work"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >是否想进入测试或者新媒体行业？具体哪个行业？</label>
                        <textarea class="form-control" required v-model="is_test"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >为什么不从事这两个行业？有什么顾虑？</label>
                        <textarea class="form-control" v-model="reason" required></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >毕业预期薪资想拿多少？</label>
                        <textarea class="form-control" required v-model="salary"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">有考虑系统提升专业技能吗</label>
                        <select required class="form-control" id="exampleFormControlSelect1" v-model="training">
                            <option value="是">是</option>
                            <option value="否">否</option>
                        </select>
                    </div>
        
                    <div class="form-group" v-show="show_more">
                        <label>对于我们企业了解多少？</label>
                        <textarea required class="form-control" v-model="we_do" placeholder="测试、新媒体运营训练营"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label>有没有其他机构沟通过？自己是怎么想的？</label>
                        <textarea required class="form-control" v-model="other_company"></textarea> 
                    </div>
                    
                    <img src="./imgs/item.png" alt="" class="pt-2 pb-2">

                    <div class="form-group">
                        <label for="exampleInputEmail1">是否已经找到实习或者在找实习？</label>
                        <textarea required class="form-control" v-model="practice" placeholder="测试、新媒体运营训练营"></textarea> 
                    </div>

                    <div class="form-group">
                        <label for="exampleInputPassword1">报名的话全款还是分期？</label>
                        <select class="form-control" id="exampleFormControlSelect1" v-model="payment">
                          <option value="1">全款</option>
                          <option value="0">分期</option>
                        </select>
                    </div>
        
                    <div class="form-group">
                        <label>不准备报名的话，最大的顾虑是什么？</label>
                        <textarea class="form-control" required v-model="worry"></textarea> 
                    </div>

                    <div class="form-group">
                        <label>是否愿意参加3天的训练营?（100元报名费，可以退费或者冲抵1000元学费）</label>
                        <textarea class="form-control" required v-model="training_camp"></textarea> 
                    </div>

                    <div class="form-group">
                        <label>对我们字节课工场还需要了解哪些问题?</label>
                        <textarea class="form-control" required v-model="question"></textarea> 
                    </div>

                    <div class="form-group">
                        <label>你觉得哪方面最看重，才会报名？</label>
                        <textarea class="form-control" required v-model="sign_up"></textarea> 
                    </div>

                    <div class="form-group">
                        <label for="exampleInputPassword1">课程意向</label>
                        <select class="form-control" id="exampleFormControlSelect1" v-model="intention">
                          <option value="S">确定报名</option>
                          <option value="A">有培训意向，还在犹豫，解决疑虑就能报名</option>
                          <option value="B">有培训意向，但是真的没钱、家里也拿不出来</option>
                          <option value="C">想从事这两个行业，但是不像培训</option>
                          <option value="D">已经报名其他机构</option>
                          <option value="E">完全想培训、也不想在这个行业</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>转介绍电话及个数</label>
                        <textarea class="form-control" required v-model="introduction"></textarea> 
                    </div>

                    <button type="submit" class="btn btn-primary" @click.prevent="sbt">Submit</button>
                    <button type="reset" class="btn btn-danger">reset</button>
                    <a href="list.html" class="btn btn-primary">列表</a>
                    <span class="text-danger">{{msg}}</span>
                  </form>
            </div>
        </div>
    </div>
    
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/qs.min.js"></script>
    <script src="js/element.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                    msg:"",//操作提示
                    show_more:false,//显示所有
                    class_name:1,
                    uname:"",
                    collage:1,
                    fresh:false,
                    improve:false,
                    tel:"",
                    wechat:"",
                    work_city:"",
                    work:"",
                    is_test:'',
                    reason:"",
                    salary:"",
                    training:"是",
                    we_do:"",
                    other_company:"",
                    id:"", //id
                    practice:"",
                    payment:1,
                    worry:"",
                    training_camp:1,
                    question:"",
                    sign_up:"",
                    intention:"S",
                    introduction:""
            },
            async mounted(){
                //A:页码加载的时候，获取要修改的数据
                //1.获取url中参数 
                var url = window.location;
                var params ="";//查询参数 http://127.0.0.1:3000/detail.html?id=4 中的 ?id=4
                if(url.search){
                    params = url.search;
                    params = params.substr(1);
                }
                //把参数 id=4 转为对象
                var data = Qs.parse(params)
                // console.log(url,params,data)
                // http://127.0.0.1:3000/detail.html?id=6&username=%E5%BC%A0%E4%B8%89
                
                //2.发请求，去数据
                let res = await axios.get(`/users/edit?id=${data.id}`);
                // console.log("detail:",res);

                //取数据
                let result = res.data || [];
                let info = result.data;
                // console.log(info)
                /* this.StudentID=info.StudentID,
                this.WeChatID=info.WeChatID,
                this.username=info.username,
                this.studentPassWord=info.studentPassWord */
                // 
                /* var data = {
                    //普通数据
                    class_name:info.class_name,
                    uname:info.uname,
                    collage:info.collage,
                    fresh:info.fresh ? 1 : 0,//应届
                    improve:info.improve ? 1 : 0,//提升学历
                    tel:info.tel,
                    wechat:info.wechat,
                    work_city:info.work_city,
                    work:info.work,
                    is_test:info.is_test,
                    reason:info.reason,
                    salary:info.salary,
                    training:info.training,
                    we_do:info.we_do,
                    other_company:info.other_company
                    //直播后
                } */
                //普通数据
                this.class_name = info.class_name;
                this.uname = info.uname;
                this.collage=info.collage;
                this.fresh=info.fresh ? 1 : 0;//应届
                this.improve=info.improve ? 1 : 0;//提升学历
                this.tel=info.tel;
                this.wechat=info.wechat;
                this.work_city=info.work_city;
                this.work=info.work;
                this.is_test=info.is_test;
                this.reason=info.reason;
                this.salary=info.salary;
                this.training=info.training;
                this.we_do=info.we_do;
                this.other_company=info.other_company;
                this.id = info.id; //记录id
                //直播后
                this.practice= info.practice;
                this.payment= info.payment;
                this.worry= info.worry;
                this.training_camp= info.training_camp;
                this.question= info.question;
                this.sign_up= info.sign_up;
                this.intention= info.intention;
                this.introduction= info.introduction;
                // 
            },
            methods:{
                showAll(){
                    this.show_more = !this.show_more;
                },
                async sbt(){
                    var data = {
                        class_name:this.class_name,
                        uname:this.uname,
                        collage:this.collage,
                        fresh:this.fresh ? 1 : 0,//应届
                        improve:this.improve ? 1 : 0,//提升学历
                        tel:this.tel,
                        wechat:this.wechat,
                        work_city:this.work_city,
                        work:this.work,
                        is_test:this.is_test,
                        reason:this.reason,
                        salary:this.salary,
                        training:this.training,
                        we_do:this.we_do,
                        other_company:this.other_company,
                        id:this.id,//记录id
                        practice : this.practice,
                        payment : this.payment,
                        worry:this.worry,
                        training_camp:this.training_camp,
                        question:this.question,
                        sign_up:this.sign_up,
                        intention:this.intention,
                        introduction:this.introduction
                    }

                    console.log(data)
                    if(!data.uname){
                        this.msg = "请填写姓名！"
                        setTimeout(() => {
                            $("html,body").animate({scrollTop:0},100)
                        }, 600);
                        return;
                    }

                    if(!data.salary){
                        this.msg = "期望薪资不能为空!"
                        return;
                    }

                    if(!data.work_city){
                        setTimeout(() => {
                            $("html,body").animate({scrollTop:"80px"},100)
                        }, 600);
                        this.msg = "请填写期望工作城市!"
                        return;
                    }
                    
                    // 发请求
                    try {
                        let res = await axios.post("/users/update",data)
                        let ret = res.data || {}
                        console.log(ret)
                        if(ret.data.affectedRows){
                            this.msg = "修改完成，谢谢参与！"
                            this.$message({
                                message: '修改完成，谢谢参与！',
                                type: 'success'
                            });

                            setTimeout(()=>{location.href="list.html"},3000)
                        }
                    } catch (error) {
                        console.log(error)
                    }
                    // 
                }
            }
        })
    </script>
  </body>
</html>